<template>
    <div>
        老师管理
        <el-table
            ref="multipleTable"
            :data="this.$store.state.shoplist"
            tooltip-effect="dark"
            style="width: 100%"
        >
            <!-- @selection-change="handleSelectionChange" -->
            <el-table-column type="selection" width="55"> </el-table-column>

            <el-table-column prop="title" label="机型" width="220">
            </el-table-column>
            <el-table-column prop="" label="价钱" width="320">
                <template slot-scope="scope">
                    {{ scope.row.market_price * scope.row.num }}
                </template>
            </el-table-column>
            <el-table-column label="图片" width="280">
                <template slot-scope="scope">
                    <img
                        :src="scope.row.img_url"
                        alt=""
                        width="50px"
                        height="50px"
                    />
                </template>
            </el-table-column>
            <el-table-column label="详情" prop="zhaiyao"> </el-table-column>
            <el-table-column label="计算" width="280">
                <template slot-scope="scope">
                    <el-input-number
                        v-model="scope.row.num"
                        @change="handleChange"
                        :min="1"
                        :max="10"
                        label="描述文字"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="280">
                <template slot-scope="scope">
                    <el-button type="primary" @click="del(scope.row.id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <van-submit-bar :price="zong * 100" button-text="提交订单" class="di" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            num: "",
        };
    },
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            if (vm.$store.state.user) {
                next();
            } else {
                alert("你还没登录");
                next("/login");
            }
        });
    },
    computed: {
        zong() {
            var num = 0;
            this.$store.state.shoplist.forEach((item) => {
                num += item.num * item.market_price;
            });
            return num;
        },
    },
    mounted() {},
    methods: {
        handleChange(value, detail) {
            this.$store.commit("handleChange", { num: value, id: detail });
        },

        del(id) {
            this.$store.state.shoplist.forEach((item, index) => {
                if (item.id == id) {
                    this.$store.state.shoplist.splice(index, 1);
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.di {
    margin-bottom: 20px;
}
</style>
